<template>
    <div class="updateClass">
        <div class="title">
            <span>加入机构</span>
        </div>
        <div class="content">
            <div class="search clearFix">
                <div class="select">
                    <el-input v-model="classCode" placeholder="请输入机构编码加入机构"></el-input>
                    <p>可通过机构编码可以快速教研机构.</p>
                    <span>如果没有机构编码，请向所在学校或教研机构管理员索取.</span>
                </div>
                <el-button type="primary" class="addMechanism" size="small" @click="handleAddClass">加入机构</el-button>
            </div>
            <el-divider content-position="left">已加入机构</el-divider>
            <div class="joined">
                <div class="joined_list clearFix" v-for="(item, index) in operateRelevanceListP" :key="index">
                    <div class="detail">
                        <el-avatar :size="60" :src="item.photo | pictureUrl" @error="errorHandler">
                            <img class="avatar" src="@a/img/headportrait03.jpg"/>
                        </el-avatar>
                    </div>
                    <div class="school">
                        <span>机构名称：{{item.username}}</span>
                        <span>加入时间：{{item.creationTime}}</span>
                    </div>
                    <div class="operation">
                        <el-button type="primary" size="small" @click="signOut(item)">退出机构</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
    export default {
        computed:{
            ...mapState({
                isShowManagement: state => state.commonModule.isShowManagement,
                userInfo: state => state.userModule.userInfo,
                otherUserInfo: state => state.userModule.otherUserInfo
            })
        },
        created(){
            this.operateRelevanceList()
        },
        data() {
            return {
                value: '',
                classCode:'',
                operateRelevanceListP: []
            }
        },
        methods: {
            // 头像加载失败
            errorHandler() {
                return true
            },

            // 退出班级
            signOut(params) {
                this.$confirm('确定退出所选机构吗?', '退出提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$store.dispatch('personalModule/deleteRelevanceByid', {
                        id: params.id
                    }).then(res =>{
                        if(res.data.code == 200){
                            this.operateRelevanceList()
                            this.$message({
                                type: 'success',
                                message: '退出成功!'
                            });
                        }   
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消退出'
                    });
                });
            },

            // 获取班级选项 输入班级编码获得
            operateRelevanceList() {
                this.$store.dispatch('personalModule/operateRelevanceList',{
                        // affiliatedId: this.classCode,
                        relationId: 4,
                        // typeId: '班级'
                    }).then(res =>{
                        if (res.data.code === 200){
                            this.operateRelevanceListP = res.data.result
                        }else{
                            this.$notify({
                                message: res.data.msg,
                                type: 'warning'
                            });
                        }
                    })    
            },

            //加入机构
            handleAddClass() {
                this.$store.dispatch('personalModule/operateRelevance',{
                    affiliatedId: this.classCode,
                    relationId:4,
                    typeId: '教研机构'
                }).then(res =>{
                    if (res.data.code === 200){
                        this.operateRelevanceList()
                        this.$notify({
                            message: '加入成功',
                            type: 'success'
                        });
                        this.classCode = ''
                    }else{
                        this.$notify({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }
                })    
            }

        },
    }
</script>

<style lang="scss" scoped>
    .updateClass {
        width: 100%;

        .title {
            text-align: left;
            border-bottom: 1px solid #DCDFE6;
            box-sizing: border-box;
            padding-bottom: 10px;
        }

        .content {
            box-sizing: border-box;
            padding-top: 10px;

            .search {
                text-align: left;
                box-sizing: border-box;
                padding-left: 25px;

                .select {
                    width: 310px;
                    font-size: 14px;
                    color: #303133;
                    float: left;
                    margin-top: 12px;
                }

                .addMechanism {
                    float: right;
                    margin-top: 10px;
                }
            }

            .joined {
                .joined_list {
                    padding-left: 25px;
                    box-sizing: border-box;
                    border-bottom: 1px solid #ccc;
                    height: 70px;

                    .operation {
                        float: right;
                        color: #606266;
                        font-size: 14px;
                        margin-top: 15px;
                    }

                    .school {
                        margin-left: 15px;
                        line-height: 60px;
                        color: #606266;
                        font-size: 14px;
                    }

                    .school > span {
                        margin-left: 20px;
                    }

                    & > div {
                        float: left;
                    }
                }

            }
        }

        .clearFix::after {
            content: "";
            display: inline-block;
            width: 100%;
            font-size: 0;
            clear: both;
        }
    }
</style>
